<template>
<div ref="num" id="num">
</div>
</template>

<script>
export default {
  name: 'data',
  data () {
    return {
      name: [],
      datalist: []
    }
  },
  mounted () {
    this.$axios.get('books/getChart').then((res) => {
      var result = []
      var result1 = []
      var name1 = res.data.data
      var i
      for (i = 0; i < name1.length; i++) {
        result[name1.length - 1 - i] = name1[i].name
        result1[name1.length - 1 - i] = name1[i].buyNumber
      }
      this.name = result
      this.datalist = result1
      this.table()
    })
  },
  methods: {
    table: function () {
      var myChart = this.$echarts.init(this.$refs.num)
      var option
      option = {
        title: {
          text: '购买次数最多的书(仅显示前5)'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: this.name
        },
        series: [
          {
            name: '购买数量',
            type: 'bar',
            data: this.datalist
          }
        ]
      }

      option && myChart.setOption(option)
    }
  }
}
</script>

<style scoped>
#num{
  height: 50%;
  width: 98%;
  margin-top: 1%;
  margin-left: 1%;
  border: #E5E5E5 2px solid;
  border-radius: 15px;
}
</style>
